import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input,Toast } from 'antd-mobile'
import './Login.less'
import Logo from '../../assets/img/logo.png'
import {connect} from 'react-redux'
import {reqlogin} from '../../request/api'
import { actions, getUsers } from '../../store/mouble/login'
import { bindActionCreators } from 'redux'
 class Login extends Component {
  
  render() {
   console.log(this.props);
   let {user,loginFn:{changeUsers,doLogin},history:{push}}=this.props
    return (
      <div className='login'>
        <Header title={'手机登录'} register></Header>
        <div className='form'>
        <img src={Logo} alt="" />
        <Form layout='horizontal'>
        <div>{JSON.stringify(user)}</div>
          <Form.Item label='用户名' name='username'>
            <Input placeholder='请输入用户名' clearable onChange={(e)=>{changeUsers('phone',e)}} defaultValue={user.phone}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(e)=>{changeUsers('password',e)}} defaultValue={user.password}/>
          </Form.Item>
        </Form>
        <div>
          <Button block color='success' size='middle' onClick={()=>{doLogin(push) }} >
            登录
          </Button>
        </div>
        </div>
      </div>
    )
  }
}
const mapStateToProps=(state)=>{
  return{
       user:getUsers(state)
  }
}
const mapDispatchToProps=(dispatch)=>{
  return{
     loginFn:bindActionCreators(actions,dispatch)
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Login)